<template>
    <el-card class="editPassword">
        <div slot="header" class="clearfix">
            <span>修改密码</span>
        </div>
        <el-form label-position="right" label-width="200px" :model="passwords" :rules="editPasswordRules" ref="passwords">
            <el-form-item label="当前密码：" prop="oldPassword">
                <el-input type="password" v-model="passwords.oldPassword"></el-input>
                <el-link :underline="false" type="primary">&emsp;忘记当前密码？</el-link>
            </el-form-item>
            
            <el-form-item label="新密码：" prop="newPassword">
                <el-input type="password" v-model="passwords.newPassword"></el-input>
                <el-tooltip content="" effect="light" placement="right">
                    <div slot="content">
                        <p style="color:gray;">密码由6-16位字符组成，区分大小写</p>
                        <p style="color:gray;">不能是9位以下的数字，不能包含空格</p>
                        <p style="color:gray;">为了提升您的密码安全性，建议使用英文字母加数字或符号的混合密码</p>
                    </div>
                    <label>&emsp;查看密码规则</label>
                </el-tooltip>
                
            </el-form-item>
            <el-form-item label="确认新密码：" prop="newRepassword">
                <el-input type="password" v-model="passwords.newRepassword"></el-input>
            </el-form-item>
            <el-form-item label="验证码：" prop="captcha">
                <el-input type="text" v-model="passwords.captcha"></el-input>
            </el-form-item>
            <el-form-item>
                <Verify @success="alert('success')" @error="alert('error')" :type="1"></Verify>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit" style="width:50%; margin-left: 40px;">确定</el-button>
            </el-form-item>
        </el-form>

    </el-card>
</template>

<script>
import Verify from 'vue2-verify'
export default {
    
    data() {
        // 自定义密码校验规则，然后在密码那里调用该规则
        var checkPassword = (rule, value, callback) => {
            var passwordPattern = /^\d{1,9}$/;
            if(value === '') {
                return callback(new Error("请输入密码!"));
            } else if(value.indexOf(" ") != -1) {
                return callback(new Error("不能包含空格"));
            } else if(value.length <6 || value.length >16) {
                return callback(new Error("长度在6-16之间"));
            } else if(passwordPattern.test(value)) {
                return callback(new Error("不能是9位以下纯数字"));
            }
            else {
                callback();
            }
        };
        // 定义确认密码的校验规则
        var checkRepassword = (rule, value, callback) => {
            if(value === '') {
                return callback(new Error("请输入确认密码！"));
            } else if(value != this.registerForm.password) {
                return callback(new Error("两次密码不一致"));
            } else {
                callback();
            }
        };
        return {
            passwords: {oldPassword: '', newPassword: '', newRepassword: '', captcha: ''},
            // 当前图形的验证码
            verifyCode: '',
            editPasswordRules: {
                oldPassword: [
                    {required: true, message: '请输入旧密码', trigger: 'blur'},
                ],
                newPassword: [
                   {required: true, message: '请输入新密码', trigger: 'blur'},
                   {validator: checkPassword, trigger: 'blur'}
                ],
                newRepassword: [
                    {required: true, message: '请输入确认密码', trigger: 'blur'},
                    {validator: checkPassword, trigger: 'blur'}
                ],
                captcha: [
                    {required: true, message: '请输入验证码', trigger: 'blur'},
                ]
            }
        }
    },
    methods:{
        submit() {
            var _this = this;
            // 先获取图片中的验证码，并转化成小写
            $(".verify-code span").each(function(index, value) {
                _this.verifyCode += $(this).text().trim().toLowerCase();
            })
            console.log(this.verifyCode);
            if(this.verifyCode == this.passwords.captcha.toLowerCase()) {
                console.log("验证成功");
            } else {
                console.log("验证失败")
            }
            this.verifyCode = '';
        }
    },
    components: {
        Verify
    },
    mounted() {
    }
}
</script>

<style>
.editPassword {
    margin: 0 auto;
    width: 50%;
}
.editPassword .el-form {
    margin-left: 150px;
}
.editPassword .el-form .el-form-item {
    margin-bottom: 20px;
}
.editPassword .el-input {
    width: 60%;
}
.verify-code {
    float: left;
}
.verify-change-area {
    margin-left: 20px;
}
.verify-btn, .verify-input-area {
    display: none;
}
</style>